<template>
	<uv-popup ref="popupRef" round="20rpx" :closeOnClickOverlay="false">
		<view class="role-pop-content-box">
			<text class="content-title">{{title}}</text>
			<text class="content-text">{{content}}</text>
			<view class="content-line"></view>
			<view class="bottom-box" @tap="close">我知道了</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import { ref } from 'vue'
	const popupRef = ref(null)
	const title= ref('')
	const content = ref('')
	const show = (params)=>{
		title.value = params.title
		content.value = params.content
		popupRef.value.open()
	}
	const close = ()=>{
		popupRef.value.close()
	}
	defineExpose({
		show
	})
</script>

<style lang="scss" scoped>
.role-pop-content-box{
	width: 560rpx;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30rpx;
	.content-title{
		font-size: 30rpx;
		color: $xh-color-3;
		font-weight: bold;
	}
	.content-text{
		color: $xh-color-3;
		font-size: 26rpx;
		margin: 40rpx 30rpx;
		
	}
	.content-line{
		background-color: $xh-line-color;
		height: 1px;
		width: 100%;
		transform: scaleY(0.5);
	}
	.bottom-box{
		color: $xh-theme-color;
		font-size: 30rpx;
		padding: 20rpx;
	}
}
</style>